<!-- 
康复治疗记录单
-->

<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium" @submit.native.prevent>
    <div class="static-content-item-head center">
      <div class="static-content-item">
        <div>姓名：</div>
        <div>{{formData.patientName}}</div>
      </div>
      <div class="static-content-item">
        <div>性别：</div>
        <div>{{getGender}}</div>
      </div>
      <div class="static-content-item">
        <div>科室：</div>
        <div>{{formData.department}}</div>
      </div>
      <div class="static-content-item">
        <div>床号：</div>
        <div>{{formData.bedNum}}</div>
      </div>
      <div class="static-content-item">
        <div>病案号：</div>
        <div>{{formData.admissionNum}}</div>
      </div>
    </div>
    <div class="center">
      <el-divider direction="horizontal"></el-divider>
    </div>
    <div>
      <div class="record-title">康复治疗记录单</div>
    </div>
    <div class="static-content-item-head center">
      <div class="static-content-item p-10">
        <div>诊断：</div>
      </div>
    </div>
    <div class="table-container">
      <table class="table-layout center">
        <tbody>
          <tr>
            <td class="table-cell">项目治疗编号
            </td>
            <td class="table-cell" colspan="5" style="text-align: left;">
              1.气压治疗 2.低频脉冲电治疗 3.中频脉冲电治疗 4. 单纯直流电治疗 5.体
              外膈肌起搏 6.单纯超声波治疗 7.经颅磁刺激治疗 8.红外线治疗 9.超短波治
              疗 10.关节粘连传统松解术11.运动疗法 12.大关节松动训练 13.小关节松动
              训练 14.平衡功能训练 15.肩周疾病推拿治疗 16.作业疗法 17. 电动起立床
              18.减重支持训练系统 19.有氧训练 20.呼吸训练 21.手功能训练 22.肢体被
              动活动 23.肌力训练 24.智能运动康复机 25.关节康复器 26.颈椎病推拿治疗
              27.功率自行车 28.川平疗法 29.神经松动训练 30.Bobath技术 31.Rood技术
              32. Brunnstrom技术 33.PNF技术 34.言语训练 35.吞咽功能障碍训练 36.认
              知知觉功能障碍训练 37.构音障碍训练
            </td>
          </tr>
          <tr>
            <td class="table-cell">注意事项
            </td>
            <td class="table-cell" colspan="5" style="text-align: left;">1.不能表达者填写“不能表达”<br>
              2.患者治疗前满足以下条件：生命体征稳定，疼痛可耐受，或主管医生评估后
              可进行康复训练<br>
              3.训练过程中关注生命体征<br>
              4.病人若出现生命体征不稳定、病情变化、极度不适主诉等，请及时联系主管
              医生，判断是否需要中止治疗<br>
            </td>
          </tr>
          <tr>
            <td class="table-cell">治疗项目（选择治疗编号）
            </td>
            <td class="table-cell">治疗前不适主诉（简述）
            </td>
            <td class="table-cell">治疗后不适主诉（简述）
            </td>
            <td class="table-cell">操作者
            </td>
            <td class="table-cell">日期
            </td>
            <td class="table-cell">时间
            </td>
          </tr>
          <tr v-for="(item,index) in rehabRecordInfos" :key="index">
            <td class="table-cell">
              <input :disabled="disabled && !item.isNew" v-model="item.rehabRecordTreatmentInfos" type="text" placeholder="请输入">
            </td>
            <td class="table-cell">
              <input :disabled="disabled && !item.isNew" v-model="item.beforeTreatmentComplaint" type="text" placeholder="请输入">
            </td>
            <td class="table-cell">
              <input :disabled="disabled && !item.isNew" v-model="item.afterTreatmentComplaint" type="text" placeholder="请输入">
            </td>
            <td class="table-cell">
              <input :disabled="disabled && !item.isNew" v-model="item.operator" type="text" placeholder="请输入">
            </td>
            <td class="table-cell">
              <el-date-picker :disabled="disabled && !item.isNew" v-model="item.date" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" />
            </td>
            <td class="table-cell">
              <el-time-select :disabled="disabled && !item.isNew" :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '24:00'
                }" v-model="item.time" placeholder="选择时间" />
              <!-- <el-date-picker v-model="item.time" type="time" placeholder="请选择时间" value-format="HH:mm:ss" /> -->
            </td>
          </tr>
          <tr>
            <td class="table-cell" colspan="6">
              <el-tag @click="addListData">点击填写</el-tag>
            </td>
          </tr>
          <tr>
            <td class="table-cell" colspan="6">
              <el-form-item label="治疗结束的疗效：" prop="afterTreatmentEffect" class="label-right-align" label-width="125px">
                <!-- <el-checkbox-group v-model="formData.afterTreatmentEffect">
                  <el-checkbox v-for="(item, index) in afterTreatmentEffectList" :key="index" :label="item.value" :disabled="item.disabled" style="display: inline">{{ item.label }}</el-checkbox>
                </el-checkbox-group> -->
                <el-radio-group v-model="formData.afterTreatmentEffect">
                  <el-radio v-for="(item, index) in afterTreatmentEffectList" :key="index" :label="item.value" :disabled="item.disabled" style="display: inline">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="static-content-item-head center ">
      <div class="static-content-item p-20">
        <div style="width: 250px;">医师或治疗师签章：</div>
        <input type="text" :disabled="disabled" v-model="doctorOrTherapistStamp" placeholder="请输入" style="text-align: left;">
      </div>
      <div class="static-content-item p-20">
        <div style="width: 80px;">日期：</div>
        {{formData.stampTime}}
      </div>
    </div>
  </el-form>

</template>

<script>
import moment from 'moment'
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      disabled: true,
      formData: {
        afterTreatmentEffect: null,
        stampTime: null
      },
      doctorOrTherapistStamp: null,
      rehabRecordInfos: [],
      rules: {},
      afterTreatmentEffectList: [{
        "label": "治愈",
        "value": 1
      }, {
        "label": "有效",
        "value": 2
      }, {
        "label": "无效",
        "value": 3
      }, {
        "value": 4,
        "label": "终止治疗"
      }],
    }
  },
  computed: {
    // 判断用户当前性别
    getGender() {
      switch (this.formData.gender) {
        case 0: return "女";
        case 1: return "男";
        default: return null;
      }
    }
  },
  created() {
    this.getRoute();
    this.setStampTime();
    this.getData();
  },
  methods: {
    //   获取路由数据
    getRoute() {
      // 0 评估 / 2 详情
      let { type = 0 } = this.$route.query
      this.disabled = !!type;
    },
    //   为列表添加数据
    addListData() {
      let data = {
        rehabRecordTreatmentInfos: [], // 治疗项目（选择治疗编号）
        beforeTreatmentComplaint: null, // 治疗前不适主诉
        afterTreatmentComplaint: null, // 治疗后不适主诉
        operator: null, // 操作者
        date: null, // 日期
        time: null, // 时间
        isNew: 1,// 是否是新增
      };
      this.$set(this.rehabRecordInfos, this.rehabRecordInfos.length, data);
    },
    // 获取系统时间
    setStampTime() {
      this.formData.stampTime = moment(this.formData.stampTime || +new Date()).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取数据
    getData() {
      // 表单数据合并
      this.formData = {
        ...this.formData,
        ...this.data
      };
      // 将列表项抽离
      let { rehabRecordInfos = [] } = this.data;
      rehabRecordInfos && (this.rehabRecordInfos = rehabRecordInfos);
      //   抽离医师
      this.doctorOrTherapistStamp = this.data.doctorOrTherapistStamp;
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}

</script>

<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

.test {
}
</style>

<style lang="scss" scoped>
el-form {
  font-family: SimSun, serif;
}
div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 18px;
      overflow-wrap: break-word;
      padding: 9px;
      /deep/ .el-date-editor {
        width: 100% !important;
        .el-input {
          width: 100% !important;
        }
      }
      /deep/ .el-form-item__content {
        text-align: left;
      }
    }
  }
}

.el-checkbox-group {
  float: left;
}

div.tab-container {
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 16px;
  display: flex;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.el-form-item {
  margin-bottom: 0px;
}

.footer {
  font-size: 16px;
}

//宽度
.w-50 {
  width: 50px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.p-10 {
  padding: 10px 0;
}

.p-20 {
  padding: 20px 0;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type="text"]:focus {
  outline: none;
}

.el-tag {
  cursor: pointer;
}
</style>